<template>
	<view class="content  with-tabbar pb-150">

		<div class=" bg-fff p-20 ">
			<u-form labelPosition="left" :model="postForm" :rules="rules" ref="uForm" labelWidth="110">

				<u-form-item borderBottom label="企业全称" prop="companyName">
					<u-input type="text" v-model="postForm.companyName" placeholder="请填写企业全称" border="none"></u-input>
				</u-form-item>
				<view class=" resume-box lh-70 flex align-center pb-15 bor-b pt-15" @click="goIndustry">
					<view class="form-label resume-title fontS28 color-3"> 所属行业 </view>
					<view class="form-cnt">
						<div class="radio" :class="industryName ? '' : 'color-b9'">{{ industryName ||
							'职位类型'
						}}</div>
					</view>
					<div class="ml-auto iconfont icon-youjiantou"></div>
				</view>
				<u-form-item borderBottom label="企业联系人" prop="linker">
					<u-input type="text" v-model="postForm.linker" placeholder="请填写联系人" border="none"></u-input>
				</u-form-item>


				<u-form-item label="企业规模" prop="sex" borderBottom @click="showComPany = true;">
					<u--input v-model="companyValue" disabled disabledColor=" #ffffff" placeholder="请选择企业规模"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
					<u-picker :show="showComPany" :columns="comPeopleList" keyName="label" title="请选择企业规模"
						:closeOnClickOverlay="true" @change="change($event, 'company')"
						@confirm="confirm($event, 'company')" @close="showComPany = false"
						@cancel="showComPany = false"></u-picker>
				</u-form-item>
				<u-form-item borderBottom label="本账号职务" prop="jobName">
					<u-input type="text" v-model="postForm.jobName" placeholder="请输入你在该企业的职务名称" border="none"></u-input>
				</u-form-item>
				<u-form-item borderBottom label="企业联系电话" prop="linkPhone">
					<u-input type="text" v-model="postForm.linkPhone" placeholder="请输入企业联系电话" border="none"></u-input>
				</u-form-item>



			</u-form>
			<div class="lh-70 flex resume-box bor-b">
				<div class="resume-title fontS28 color-3 pt-15">企业联系地址</div>
				<div class="fontS28 color-0d0 resume-input">
					<picker mode="region" @change="change($event, 'region')">
						<view class=" resume-box lh-70 flex align-center pb-15 bor-b  pt-15">

							<view class="form-cnt1 ">
								<div class="radio" :class="value ? '' : 'color-b9'">{{ value || '请选择省市县' }}
								</div>
							</view>
							<div class="ml-auto iconfont icon-youjiantou"></div>
						</view>
					</picker>
					<div class="lh-70 flex align-center pb-15 resume-box pt-15">
						<div class="fontS28 color-0d0 resume-input">
							<textarea type="text" placeholder="请输入详细地址" placeholder-style="color:#b9bcc5"
								v-model="postForm.address" />
						</div>
					</div>
				</div>
			</div>
			<div class="lh-70 flex align-start pb-15 resume-box pt-15">
				<div class="resume-title fontS28 color-3">企业简介</div>
				<div class="fontS28 color-0d0 resume-input pt-20">
					<textarea type="text" placeholder="企业名称" placeholder-style="color:#b9bcc5"
						v-model="postForm.introduction" />
				</div>
			</div>


		</div>
		<div class="mt-20 bg-fff bor-r16 p-20">
			<div class="fontS28 font-bold">营业执照</div>
			<div class="uploadBox mt-20 bg-fff bor-r16 p-20 pt-50 pb-50 flex flex-direction justify-center align-center"
				v-if="postForm.businessLicenseUrl">
				<image class="img" :src="baseUrl + postForm.businessLicenseUrl" mode="aspectFill"></image>
			</div>
			<div class="uploadBox mt-20 bg-fff bor-r16 p-20 pt-50 pb-50 flex flex-direction justify-center align-center"
				v-else @click="uploadSent('cert')">
				<div class="font-500 ">上传营业执照</div>
				<div class="mt-10 fontS28 color-6d">最大文件大小10MB</div>
				<div class="uploadBtn flex-center justify-center fontS28 mt-32">
					<i class="iconfont icon-shangchuan mr-20"></i> 添加文件
				</div>
			</div>
		</div>
		<div class="mt-20 bg-fff bor-r16 p-20">
			<div class="flex-center">
				<div class="fontS28 font-bold">授权书</div>
				<div class="fontS24 color-green ml-auto" @click="uploadTemp">下载模板</div>
			</div>
			<div class="uploadBox mt-20 bg-fff bor-r16 p-20 pt-50 pb-50 flex flex-direction justify-center align-center"
				v-if="postForm.empowerUrl">
				<image class="img" :src="baseUrl + postForm.empowerUrl" mode="aspectFill"></image>
			</div>

			<div class="uploadBox mt-20 bg-fff bor-r16 p-20 pt-50 pb-50 flex flex-direction justify-center align-center"
				v-else @click="uploadSent('power')">
				<div class="font-500 ">上传授权书</div>
				<div class="mt-10 fontS28 color-6d">最大文件大小10MB</div>
				<div class="uploadBtn flex-center justify-center fontS28 mt-32">
					<i class="iconfont icon-shangchuan mr-20"></i> 添加文件
				</div>
			</div>
		</div>

		<div class="bottom">
			<div class="submitBtn fontS26" @click="toNext">提交审核
			</div>

		</div>



	</view>
</template>

<script>
const ossUploadFile = require("@/utils/ossupload/upload").ossUploadFile;
import { companyApply, empowerUrlLoad } from '@/api/auth'
export default {
	computed: {
		userInfo() {
			console.log(this.$store.getters.userInfo)
			return this.$store.getters.userInfo || {};
		},
	},
	data() {
		return {

			baseUrl: getApp().globalData.baseUrl,
			postForm: {
				"address": "",
				"areaCode": "",
				"businessLicenseUrl": "",
				"cityCode": "",
				"companyName": "",
				"companySize": "",
				"empowerUrl": "",
				"industryId": 0,
				"industryTypeId": 0,
				"introduction": "",
				"jobName": "",
				"linkPhone": "",
				"linker": "",

				"provinceCode": ""
			},
			rules: {
				companyName: [{
					required: true,
					message: '请输入企业名称',
					trigger: ['blur', 'change'],
				},],
				linker: [{
					required: true,
					message: '请输入企业联系人',
					trigger: ['blur', 'change'],
				},],
				jobName: [{
					required: true,
					message: '请输入本账号职务',
					trigger: ['blur', 'change'],
				},],
				linkPhone: [{
					required: true,
					message: '请输入企业联系电话',
					trigger: ['blur', 'change'],
				},],

				introduction: [{
					required: true,
					message: '请输入企业简介',
					trigger: ['blur', 'change'],
				},],

			},
			industryName: '',
			value: '',
			companyValue: null,
			comPeopleList: [
				getApp().globalData.comPeople
			],
			showComPany: false,
			regionList: [],
			postStatus: false,
			prePage: null
		}
	},
	async onLoad(options) {

	},
	onReady() {
		this.$refs.uForm.setRules(this.rules)
	},
	methods: {
		goIndustry() {
			uni.navigateTo({
				url: '/pages/index/industry?page=creat',
			});
		},

		confirm(e, type) {
			console.log(e.values[0][0].label)
			this.postForm.companySize = e.values[0][0].value
			this.companyValue = e.values[0][0].label
			console.log(this.companyValue)
			this.showComPany = false;

		},
		change(e, type) {

			console.log(e)
			if (type === 'company') {
				this.postForm.companySize = e.value[0].value
				this.companyValue = e.value[0].label
			}

			if (type === 'region') {
				console.log(e)
				this.value = e.detail.value.join('')
				this.postForm.provinceCode = e.detail.code[0]
				this.postForm.cityCode = e.detail.code[1]
				this.postForm.areaCode = e.detail.code[2]

			}
			// this.showSex = false
		},
		async uploadTemp() {
			const { data } = await empowerUrlLoad()
			uni.downloadFile({
				url: this.baseUrl + data.url,
				success: (res) => {

					if (res.statusCode === 200) {
						this.saveFile(res.tempFilePath, this.baserUrl + data.url);
					}
				},
				fail: (err) => {
					uni.hideLoading();
					console.error('下载失败', err);
					uni.showToast({
						title: '下载失败',
						icon: 'none'
					});
				}
			});

		},
		saveFile(tempFilePath, url) {
			uni.openDocument({
				filePath: tempFilePath,
				fileType: url.split('.')[url.split('.').length - 1],
				success: () => {
					// 3. 提示用户手动保存
					uni.setClipboardData({
						data: url,
						success: () => {
							uni.showToast({
								title: '复制成功，请在浏览器打开保存',
								icon: 'none'
							});
						},
						fail: (err) => {
							console.error('复制失败:', err);
							uni.showToast({
								title: '复制失败',
								icon: 'none'
							});
						}
					});
				}
			});
			// uni.saveFile({
			// 	tempFilePath: tempFilePath,
			// 	success: (res) => {
			// 		uni.showToast({
			// 			title: '保存成功',
			// 			icon: 'success'
			// 		});
			// 		console.log('文件保存路径:', res.savedFilePath);
			// 	},
			// 	fail: (err) => {
			// 		console.error('保存失败', err);
			// 		uni.showToast({
			// 			title: '保存失败',
			// 			icon: 'none'
			// 		});
			// 	}
			// });
		},
		async uploadSent(type) {
			let _this = this;
			uni.chooseImage({
				count: 1, // 默认选择一个文件
				sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
				success: (res) => {

					console.log(res.tempFilePaths)
					this.uploadImages(res.tempFilePaths[0], type)
				},
				fail: (err) => {
					console.error('选择文件失败', err);
				}
			});
		},
		async uploadImages(path, type) {
			let data = { type: 11 };
			data.filePath = path
			ossUploadFile.ossUploadFile(data, async (res) => {
				if (type === 'cert') {
					this.postForm.businessLicenseUrl = res.fileName
				} else {
					this.postForm.empowerUrl = res.fileName
				}



			}, async (error) => {
				console.log(error)

			})
		},
		async toNext() {

			this.$refs.uForm.validate().then(async res => {
				console.log('校验成功')
				if (!this.postForm.industryId) {
					uni.showToast({ title: '请先选择所属行业', icon: 'none' });
					return false;
				}
				if (!this.postForm.businessLicenseUrl) {
					uni.showToast({ title: '请先上传营业执照', icon: 'none' });
					return false;
				}
				if (!this.postForm.provinceCode || !this.postForm.cityCode || !this.postForm.areaCode) {
					uni.showToast({ title: '请先选择省市县', icon: 'none' });
					return false;
				}
				if (!this.postForm.address) {
					uni.showToast({ title: '请先输入详细地址', icon: 'none' });
					return false;
				}
				if (!this.postForm.empowerUrl) {
					uni.showToast({ title: '请先上传授权书', icon: 'none' });
					return false;
				}
				if (!this.postForm.introduction) {
					uni.showToast({ title: '请先输入企业简介', icon: 'none' });
					return false;
				}
				const { data } = await companyApply(this.postForm)


			}).catch(errors => {
				console.log('校验失败')
			})

			// if (this.prePage === 'edit') {
			// 	const { code, data } = await editPersonalInfo(this.postForm)
			// 	uni.navigateBack({
			// 		delta: 1
			// 	})
			// } else {
			// 	uni.setStorageSync('creat1Info', JSON.stringify(this.postForm))
			// 	uni.navigateTo({
			// 		url: '/pages/resume/creat2',
			// 	});
			// }



		},


	}
}
</script>

<style lang="less" scoped>
.content {
	display: flex;
	flex-direction: column;
	padding: 20upx;
	// text-align: center;



}

.title {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 20px;
}

.resume-box {
	.resume-title {
		min-width: 110px;
	}

	.form-cnt {
		width: calc(100% - 300upx);
	}

	.form-cnt1 {
		width: calc(100% - 80upx);
	}

	.resume-input {
		width: calc(100% - 110px);

		input {
			width: 100%;
			height: 50upx;
			line-height: 50upx;
		}

		textarea {
			width: 100%;
			height: 200upx;
		}
	}
}

.bottom {
	padding-bottom: calc(constant(safe-area-inset-bottom) + 22upx);
	/*兼容 IOS<11.2*/
	padding-bottom: calc(env(safe-area-inset-bottom) + 22upx);
	/*兼容 IOS>11.2*/
}

.color-0d0 {
	color: #0D0D12;
}

.uploadBox {
	border: 1px dashed #34AC6E;

	.img {
		width: 100%;
		height: 200upx;
	}

}

.uploadBtn {
	width: 80%;
	border: 1px solid #34AC6E;
	color: #34AC6E;
	height: 80upx;
	border-radius: 100upx;

}
</style>